<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html{
            background:rgba(42,44,64,.7) ;
        }
        .popup{
            width: 100%;
            height: 100%;
            color: #000;
        }
        .popup>div{
            width: 48.7%;
            height: 120px;
            float: left;
            margin-bottom: 10px;
            border-radius: 3px;
        }
        #temp{
            background: rgba(199, 58, 58,.7);
            margin-right: 10px;
        }
        #press{
            background:rgba(20, 88, 158, 0.7)
        }
        #level{
            background: rgba(20, 88, 158, 0.7);
            margin-right: 10px;
        }

    </style>
</head>
<body>
<!--弹出窗口-->
<div class="popup">
    <div id="temp"></div>
    <div id="press"></div>
    <div id="level"></div>
    <div id="video">
        <video style="width: 100%; height: 120px" src=" ../static/video/big-buck-bunny_trailer.mp4" controls="controls"></video>
    </div>
</div>
<script src="../node_modules/jquery-2.0.3.js"></script>
<script src="../node_modules/echarts/echarts.js"></script>
<script>
    var temp = echarts.init(document.getElementById('temp'));
    var press = echarts.init(document.getElementById('press'));
    var level = echarts.init(document.getElementById('level'));
    temp.setOption({
        grid:{
            top:10,
            bottom:30,
            left:10,
            right:10
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLabel : {
                formatter: '{value}',
                textStyle: { //改变刻度字体样式
                    color: '#fff',
                    fontSize:10
                }
            }
        },
        yAxis: {
            type: 'value',
            show: false
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            areaStyle: {
                color:'#62caff'
            }
        }]
    })
    press.setOption({
        grid:{
            top:10,
            bottom:30,
            left:10,
            right:10
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['3AM', '4AM', '5AM', '6AM', '7AM', '8AM', '9AM','10AM', '11AM', '12AM','13AM'],
            axisLabel : {
                formatter: '{value}',
                textStyle: { //改变刻度字体样式
                    color: '#fff',
                    fontSize:8
                }
            }
        },
        yAxis: {
            type: 'value',
            show: false
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320,1420,1120,920,220],
            type: 'line',
            areaStyle: {
                color:'#ffb63b'
            }
        }]
    })
    level.setOption({
        grid:{
            top:10,
            bottom:30,
            left:10,
            right:10
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLabel : {
                formatter: '{value}',
                textStyle: { //改变刻度字体样式
                    color: '#fff',
                    fontSize:10
                }
            }
        },
        yAxis: {
            type: 'value',
            show: false
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            areaStyle: {
                color:'#7eff3c'
            }
        }]
    })
</script>
</body>
</html>